﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
 <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <script type="text/javascript">
        var map;

        require([
        "esri/map",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/MapImageLayer",
        "esri/layers/MapImage",

        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
        ], function (
        Map, ArcGISTiledMapServiceLayer, MapImageLayer, MapImage, dom, on
        ) {
            var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";
            var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
            map = new Map("map", {
                center: [-122.488609, 48.189605],
                zoom: 6
            });
            map.addLayer(agoLayer);

            setupDropZone();

            function setupDropZone() {
                var node = dom.byId("map");
                on(node, "dragenter", function (evt) {//拖动开始
                    evt.preventDefault();
                });

                on(node, "dragover", function (evt) {//拖动结束
                    evt.preventDefault();
                });

                on(node, "drop", handleDrop);//放下事件
            }

            function handleDrop(evt) {
                evt.preventDefault();//取消原来事件，重新写
                var files = evt.dataTransfer.files;//数据转换 文件
                if (files.length != 2) {
                    return;
                }

                var tfwFile;
                if (files[0].name.indexOf(".tfw") !== -1) {//判断是否为.tfw文件
                    pngFile = files[1];
                    tfwFile = files[0];
                }
                else {
                    pngFile = files[0];
                    tfwFile = files[1];
                }

                readDataFromFile(pngFile, tfwFile);//读取数据
            }

            function readDataFromFile(pngFile, tfwFile) {
                var reader = new FileReader();//读文件对象
                var layerName = pngFile.name.split('.')[0];//获取文件名称
                reader.onload = function () {
                    // 读取TFW文件中的参数
                    var newLineIdx = reader.result.indexOf("\n");
                    var lines = reader.result.split("\r\n");

                    var objectURL = URL.createObjectURL(pngFile);//创建对象路径

                    var img = new Image();
                    img.onload = function () {
                        //设置范围
                        var xminValue = parseFloat(lines[4]);
                        var xmaxValue = xminValue + lines[0] * img.width;
                        var ymaxValue = parseFloat(lines[5]);
                        var yminValue = ymaxValue + lines[3] * img.height;
                        //创建MapImageLayer
                        var lyr = new MapImageLayer({ id: layerName, visible: true });
                        var hrefValue = objectURL;
                        var image = new MapImage({
                            extent: {
                                xmin: xminValue, ymin: yminValue,
                                xmax: xmaxValue, ymax: ymaxValue,
                                spatialReference: { wkid: 4326 }
                            },
                            href: hrefValue//绑定文件
                        });
                        lyr.addImage(image);//image对象添加到MapImageLayer图层

                        map.addLayer(lyr);
                        var fullExtent = image.extent;//获取范围
                        map.setExtent(fullExtent, true);//设置地图范围

                        URL.revokeObjectURL(objectURL);//撤销路径
                    };
                    img.src = objectURL;
                };
                reader.readAsText(tfwFile);//读取文件
            }
        });
    </script>
</head>
<body class="tundra">
    <div id="map" style="position:relative;width:99%; height:100%;border:1px solid #000;">
    </div>
</body>
</html>
